<template>
    <PageHeader hidden-breadcrumb>
        <template #title><div class="demo-title">商品列表</div></template>
        <template #content>
          <div class="demo-content">以卡片的形式展现商品或图片信息。</div>
        </template>
    </PageHeader>
    
    <Row style="margin:20px;" :gutter="10">
        <i-col :lg="6" :xs="24" :sm="12" :md="12" v-for="item in data" :key="item.name" style="margin-bottom:20px;">
            <GoodsInfo :info="item"/>
        </i-col>
    </Row>
    <div class="ivu-mt ivu-text-center">
        <Page :total="100" show-sizer />
    </div>
</template>

<script>
import GoodsInfo from '@/components/list/components/GoodsInfo.vue'
export default {
    components:{
        GoodsInfo
    },
    data () {
        return {
            data: [
                {title:'Vue.js 实战',desc:'Vue.js 作者尤雨溪作序',amount:'¥ 69 元',status:'推荐',color:'success',image:'http://dev-file.iviewui.com/yxsk0RFxdR0X3S0N7QN33mvwLnkfHEJV/middle'},
                {title:'蒙马特城市安全防盗背包',desc:'XDDESIGN 经典版',amount:'¥ 350 元',status:'',image:'http://dev-file.iviewui.com/8WwJ7tWv9uZ8hepq8pDTjLQiHZy2MB9I/middle'},
                {title:'Sony 无线立体声耳机',desc:'WH-H800',amount:'¥ 1450 元',status:'',image:'http://dev-file.iviewui.com/PKCycgm3DWJOca5I2uAEqneuLFQAcKa7/middle'},
                {title:'京东 E 卡（100元）',desc:'面值 100 元的京东E卡（电子卡）',amount:'¥ 100 元',status:'缺货',color:'warning',image:'http://dev-file.iviewui.com/KUa7CaC6m7vRtDCfY0SAXlp7dw9OvBrf/middle'},
                {title:'Cherry 机械键盘背光版',desc:'Cherry MX BOARD 1.0',amount:'¥ 600 元',status:'',image:'http://dev-file.iviewui.com/UTPgv8fkOHXszM8Xxm33C2ABuTw7AlRE/middle'},
                {title:'妙控鼠标 2 - 银色',desc:'Apple Mouse',amount:'¥ 582 元',status:'',image:'http://dev-file.iviewui.com/OYZqqiP1bbwN22Ai2HnwvSagxuSNchdD/middle'}
            ]
        }
    },
    methods: {
        show (index) {
            this.$Modal.info({
                title: 'User Info',
                content: `Name：${this.data[index].name}<br>Age：${this.data[index].age}<br>Address：${this.data[index].address}`
            })
        },
        remove (index) {
            this.data.splice(index, 1);
        }
}
}
</script>